<template>
    <span :style="style" class="img-vant">
        <van-image 
        :height="height"
        :width="width"
        :round="isRound" 
        :lazy-load="isLazy"
        :src="src" 
        :fit="fit" 
        :radius="radius"
        />
    </span>
</template>

<script>
// UI组件
import { Image } from "vant"
import { Lazyload } from "vant"

// VUE 全家桶
import Vue from "vue"
Vue.use(Image).use(Lazyload)

export default {
    name: 'ImageVant',
    props: {
        isRound: { // 是否为圆形
            type: Boolean,
            default: false
        },
        src: { // 地址
            type: String,
            default: ''
        },
        fit: { // 填充模式
            type: String,
            default: ''
        },
        height: {
            default: ''
        },
        width: {
            default: ''
        },
        radius: {
            default: ''
        },
        isLazy: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {
            style: {
                width: typeof this.width === 'number' ? this.width + 'px' : '',
                height: typeof this.height === 'number' ? this.height + 'px' : '',
            }
        }
    },
}
</script>

<style lang="scss" scoped>
.img-vant {
    cursor: pointer;
    display: inline-block;
}
</style>